<template>
	<view>
		<view class="tabs flex-around">
			<view class="tab" v-for="item in list" :key="item.id" @click="onTab(item)">
				<view :class="[item.status ? 'tabText tabActive' : 'tabText']">
					{{ item.title }}
				</view>
				<view class="tabLine" v-if="item.status"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ["onTab"],
		props: {
			list: {
				default: () => []
			},
			tabsId: {
				default: "",
			},
		},
		data() {
			return {
				tabId: "",
			}
		},
		created() {
			this.list.forEach((item,index) => {
				item.status = false;
				if(item.id == this.tabsId) {
					item.status = true;
					this.tabId = item.id;
				}
			})
		},
		methods: {
			onTab(param) {
				this.list.forEach((item,index) => {
					item.status = false;
					if(item.id == param.id) {
						item.status = true;
						this.tabId = item.id;
					}
				})
				this.$emit("onTab",this.tabId);
			},
		},
	}
</script>

<style scoped lang="scss">
	.tabs {
		width: 100%;
		height: 88rpx;
		.tab {
			position: relative;
			.tabText {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #000000;
				line-height: 40rpx;
			}
			.tabActive {
				font-weight: bold;
			}
			.tabLine {
				width: 48rpx;
				height: 6rpx;
				background: #F2615F;
				border-radius: 2rpx;
				position: absolute;
				bottom: -20rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}
			
		}
	}
</style>